<template>
	<div class="app">
		<h2>{{ message }}</h2>
		<input type="text"  v-model="message">
	</div>
</template>

<script setup lang="ts" name="App">
/**
 * 
 *  
 *  https://cn.vuejs.org/api/reactivity-advanced#toraw
 * 
 * 
 */
import { ref, reactive, readonly, shallowReadonly, toRaw, onMounted, markRaw } from "vue";

let  message = ref('hello')

// markRaw 标记之后，以后 就不会变成响应式， 将一个对象标记为不可被转为代理。返回该对象本身。
// let car = markRaw({
// 	brand: '奔驰',
// 	options: {
// 		color: '红色',
// 		price: 100
// 	}
// })

// // 此时car2 就没有响应式的数据了。
// let car2 = reactive(car)





</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>